import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
let scene, camera, renderer, controls

/* 
  顶点着色器语法
*/
function init() {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 0, 5)
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)
};

function createBasic () {
  // 1. 创建平面
  const geometry = new THREE.PlaneGeometry(1, 1)

  // 2. 创建材质
  const material = new THREE.ShaderMaterial({
    // 顶点着色器
    // gl_Position，注意大小写，接受并设置物体的顶点坐标，值必须是vec4 类型，所以你看vec4(0, 1.0, 0, 1.0)的格式
    // vec4是内置函数，定义4维空间点，xyzw，w表示的是缩放比例，xyz都要除以w，x / w, y / w, z / w
    // position的值是几何图形geometry的position属性

    // 出现问题：
    // 单纯设置位置会出现如下问题：vec4(position, 1.0); 原因是GPU的世界转化为设备坐标，直接渲染到屏幕上了，导致显示的太大
    // 模型矩阵：modelMatrix 本地坐标 -> 世界坐标 （modelMatrix (内置变量)）
    // 视图矩阵：viewMatrix  世界坐标 -> 设备坐标（将场景中的物体转换为摄像机视角）
    // 投影矩阵：projectionMatrix 设备坐标 -> 裁剪空间（将视图坐标转化为可视范围内的裁剪）
    // 注意，projectionMatrix一定要放在最前面
    vertexShader: `
      void main () {
        gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
      }
    `,
    // 片元着色器
    // gl_FragColor注意大小写，用于接受像素点颜色数值，值必须vec4类型
    // 0, 1.0, 0是绿色，1.0是透明度，其他值都要除以他
    fragmentShader: `
      void main () {
        gl_FragColor = vec4(0, 1.0, 0, 0.9);
      }
    `
  })
  // 3. 创建物体
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
}

function renderLoop() {
  renderer.render(scene, camera)
  controls.update()
  requestAnimationFrame(renderLoop)
}

init()
createBasic()
renderLoop() 

